var NewMap = React.createClass({
    getInitialState:function(){
        return {
            places:[],
            mapAddress:{},
            searchAddr:''
        }
    },
    componentDidMount:function(){
        var that = this;
        that.mapObj = new AMap.Map(that.refs.container,{
            center:[120.157696, 30.285087],
            level:11  //地图显示的比例尺级别  
        });
        AMap.plugin(['AMap.ToolBar','AMap.Scale', 'AMap.Geocoder', 'AMap.PlaceSearch'],
            function(){
                that.mapObj.addControl(new AMap.ToolBar());

                that.mapObj.addControl(new AMap.Scale());
                //根据地点经纬度获取名称插件
                that.geocoder = new AMap.Geocoder({
                    city: "0571"//城市，默认：“全国”
                });
                //搜索插件 
                that.placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                    pageSize: 5,
                    pageIndex: 1,
                    city: "0571", //城市
                });
        });
        that.mapObj.on('click', function (e) {
            that.mapClick(e);
        }); 
    },

    //初始化地图，对已经标记的地方进行打点
    initMap:function(_markedPlaces){
        var that = this;
        
        //对已经添加的地方进行打点标记
        if(_markedPlaces.length > 0){
            for(var i=0; i<_markedPlaces.length; i++){
                that.oldMarker = new AMap.Marker({
                    icon:'images/mark.png',
                    map:that.mapObj
                });
                that.oldMarker.setPosition([_markedPlaces[i].longitude, _markedPlaces[i].latitude]);
            }
        }
    },

    //点击地图选中地点
    mapClick:function(e){
        var that = this;
        if(!that.marker){
            that.marker = new AMap.Marker({
                // center:[120.157696, 30.285087],
                map:that.mapObj
            });
        }
        that.marker.setPosition(e.lnglat);
        that.mapObj.panTo(e.lnglat);
        var lnglatXY = [e.lnglat.lng, e.lnglat.lat];
        that.setState({
            mapAddress:{"lng":e.lnglat.lng, "lat":e.lnglat.lat},
            
        })
        
        that.geocoder.getAddress(lnglatXY, function (status,result) {
            if(status === 'complete'){
                that.setState({
                    mapAddress:{"address":result.regeocode.formattedAddress}
                })
                that.props.select(that.state.mapAddress);
               
            }else{
                that.setState({
                    mapAddress:{"address":''}
                })
            }
        });
    },
    searchPlace:function(e){
        var self = this;
        this.setState({
            searchAddr:e.target.value
        })
        var place = self.state.searchAddr;

        this.placeSearch.search(place, function(status, result){
            if(status === 'complete'){
                if(result.info === 'OK'){
                    var _arr = result.poiList.pois;
                    var _places = [];
                    for(var i=0; i<_arr.length; i++){
                        _places.push({lng:_arr[i].location.lng,lat:_arr[i].location.lat,address:_arr[i].name});
                    }
                    self.setState({
                        places:JSON.parse(JSON.stringify(_places)),
                    })
                }
            }
        });
    },
    clearInput:function(){
        this.setState({
            searchAddr:'',
            places:[]
        });
    },
    //点击搜索列表在地图相应位置上打点
    mark:function(index){
        var that = this;
        var lnglatXY = [this.state.places[index].lng, this.state.places[index].lat];
        if(!this.marker){
            this.marker = new AMap.Marker({
                // center:[120.157696, 30.285087],
                map:this.mapObj
            });
        }
        this.marker.setPosition(lnglatXY);
        this.mapObj.panTo(lnglatXY);

        this.setState({
            mapAddress:{"lng":this.state.places[index].lng, "lat":this.state.places[index].lat},
            searchAddr:this.state.places[index].address
        });
        this.geocoder.getAddress(lnglatXY, function (status,result) {
            if(status === 'complete'){
                that.setState({
                    mapAddress:{"address":result.regeocode.formattedAddress}
                })
                that.props.select(that.state.mapAddress);
               
            }else{
                that.setState({
                    mapAddress:{"address":''}
                })
            }
        });


        // var _tmp = JSON.parse(JSON.stringify(this.state.places));
        // this.setState({
        //     mapAddress:{
        //         "lng":_tmp[index].lng, 
        //         "lat":_tmp[index].lat,
        //         "address": _tmp[index].address
        //     },
        //     searchAddr: _tmp[index].address
        // });
        // debugger
        // this.props.select(_tmp[index]);

        this.setState({
            places:[]
        });

    },
    clear:function(){
        this.setState({
            mapAddress:{}
        })
    },
    render:function(){
        var self = this;
        return (
            <div className='m-newEidtMap'>
                <input type="text" placeholder="搜索地址" value={this.state.searchAddr} onChange={this.searchPlace}/>
                <icon onClick={self.clearInput}>X</icon>
                <ul>
                {
                    this.state.places.map(function(item,index){
                        return (<li onClick={self.mark.bind(self, index)}>{item.address}</li>)
                    })
                }
                </ul>
                <div className="new-map" ref="container" />
                
            </div>
        )        
    }
});
module.exports = NewMap;